<!--
 * @Author: your name
 * @Date: 2021-11-25 11:18:32
 * @LastEditTime: 2023-03-11 11:32:29
 * @LastEditors: zzb
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \front-end\src\App.vue
-->
<template>
  <div id="app">
    <router-view />

    <el-dialog
      v-dialogDrag
      title="修改密码"
      width="50%"
      :visible.sync="dialogFormVisibleExpirationDayNum"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-form
        ref="form"
        :model="pwdOverTimeForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input
            v-model="pwdOverTimeForm.oldPassword"
            placeholder="请输入旧密码"
            type="password"
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="pwdOverTimeForm.newPassword"
            placeholder="请输入新密码"
            type="password"
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="pwdOverTimeForm.confirmPassword"
            placeholder="请确认密码"
            type="password"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="submit">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      v-dialogDrag
      width="40%"
      title="初始密码修改"
      :show-close="false"
      :visible="dialogFirstLoginVisible"
      custom-class="center-dialog"
    >
      <el-steps :active="active">
        <el-step title="初次登录" />
        <el-step title="修改初始密码" />
        <el-step title="完成" />
      </el-steps>
      <div v-if="active == 1" class="topTip">
        您好，为了您的账号安全，请点击下一步修改初始密码
      </div>
      <div
        v-if="active != 3"
        style="width: 80%; margin: 10px auto 20px; text-align: center"
      >
        <el-form
          ref="firstLoginFormRef"
          :model="firstLoginForm"
          :rules="rules2"
          label-width="120px"
        >
          <el-row v-show="active == 1">
            <el-col :span="24">
              <el-form-item label="用户名：">
                <el-input
                  v-model="loginId"
                  :disabled="false"
                  readonly
                  style="width: 100%"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="active == 2">
            <el-col :span="24">
              <el-form-item label="旧密码" prop="oldPassword">
                <el-input
                  v-model="firstLoginForm.oldPassword"
                  placeholder="请输入旧密码"
                  maxlength="50"
                  type="password"
                  show-password
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="新密码" prop="newPassword">
                <el-popover
                  ref="popover"
                  placement="right"
                  width="300"
                  trigger="focus"
                >
                  <span>
                    必须使用字母、数字和特殊字符组成强口令，<br />长度不小于6个字符，不超过15个字符，注意不要使用空格。
                  </span>
                  <el-input
                    slot="reference"
                    v-model="firstLoginForm.newPassword"
                    placeholder="请输入密码"
                    maxlength="50"
                    type="password"
                    show-password
                  />
                </el-popover>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="确认新密码" prop="confirmPassword">
                <el-input
                  v-model="firstLoginForm.confirmPassword"
                  placeholder="请输入密码"
                  maxlength="50"
                  type="password"
                  show-password
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div v-if="active != 1" slot="footer" class="dialog-footer">
          <el-button @click="resetForm('form')">上一步</el-button>
          <el-button
            type="primary"
            @click="submitFirstLoginForm('firstLoginFormRef')"
            >下一步</el-button
          >
        </div>
        <div v-else slot="footer" class="dialog-footer">
          <el-button type="primary" @click="nextTip">下一步</el-button>
        </div>
      </div>
      <div v-if="active === 3" class="ImgTip">
        <div style="margin: 20px 0">
          <svg-icon
            v-if="isSuccess === true"
            icon-class="pwdSuccess"
            style="font-size: 40px"
          />
          <svg-icon v-else icon-class="pwdFail" style="font-size: 40px" />
        </div>
        <p v-if="isSuccess === true">修改密码成功</p>
        <p v-else>网络开小差了，导致密码修改失败，请重新修改</p>
        <el-button
          v-if="isSuccess === true"
          type="primary"
          @click="returnDialogTableVisible"
          >重新登录</el-button
        >
        <el-button v-else type="primary" @click="again">重新修改</el-button>
      </div>
    </el-dialog>
    <Tour ref="tour"></Tour>
  </div>
</template>

<script>
import { GetCurrentBrowser } from "@/utils/browser";
import { updateUserPwd } from "@/api/system/user";
import DevicePixelRatio from "./utils/devicePixelRatio";

import Tour from "@/components/tour/index.vue";

export default {
  name: "App",
  metaInfo() {
    return {
      title:
        this.$store.state.settings.dynamicTitle &&
        this.$store.state.settings.title,
      titleTemplate: (title) => {
        let s = title
          ? `${title} - ${process.env.VUE_APP_TITLE} ${process.env.VUE_APP_BANBEN}`
          : `${process.env.VUE_APP_TITLE} ${process.env.VUE_APP_BANBEN}`;
        return this.loginId == "dsnwwz" ? city_name + s : s;
      },
    };
  },
  provide() {
    return {
      tour: this,
      city_name,
    };
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      let mode = 0;
      if (!value) {
        callback(new Error("密码不能为空"));
      } else if (value.length < 6 || value.length > 15) {
        callback(new Error("长度为6-15个字符"));
      } else {
        if (/\d/.test(value)) mode++; //数字
        if (/[A-Z]/.test(value)) mode++; //大写字母
        if (/[a-z]/.test(value)) mode++; //小写字母
        if (/[\W_]/.test(value)) mode++; //特殊字符

        if (mode < 3) {
          callback(new Error("必须包含大写字母、小写字母、数字、符号3种"));
        }
        callback();
      }
    };
    const validatecheckPassword = (rule, value, callback) => {
      if (!value) {
        callback(new Error("确认密码不能为空"));
      } else if (value != this.pwdOverTimeForm.newPassword) {
        callback(new Error("两次输入的密码必须一致!"));
      } else {
        callback();
      }
    };
    const validatecheckPassword2 = (rule, value, callback) => {
      if (!value) {
        callback(new Error("确认密码不能为空"));
      } else if (value != this.firstLoginForm.newPassword) {
        callback(new Error("两次输入的密码必须一致!"));
      } else {
        callback();
      }
    };
    return {
      city_name: city_name,
      // 第一次登录改密码
      firstLoginForm: {
        oldPassword: "",
        newPassword: "",
        confirmPassword: "",
      },
      isSuccess: false,
      active: 1,

      pwdOverTimeForm: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined,
      },
      // 表单校验
      rules: {
        oldPassword: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: ["blur", "change"],
          },
        ],
        newPassword: [
          { required: true, validator: validatePassword, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, validator: validatecheckPassword, trigger: "blur" },
        ],
      },
      // 表单校验
      rules2: {
        oldPassword: [
          { required: true, message: "请输入旧密码", trigger: "blur" },
        ],
        newPassword: [
          { required: true, validator: validatePassword, trigger: "blur" },
        ],
        confirmPassword: [
          {
            required: true,
            validator: validatecheckPassword2,
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: { Tour },
  computed: {
    dialogFormVisibleExpirationDayNum() {
      return Boolean(this.$store.state.user.dialogFormVisibleExpirationDayNum);
    },
    dialogFirstLoginVisible() {
      return this.$store.state.user.dialogFirstLoginVisible;
    },
    loginId() {
      return this.$store.state.user.loginId;
    },
  },
  created() {
    // new DevicePixelRatio().init();
  },
  mounted() {
    // sessionStorage.removeItem("firstLogin");
    this.$store.dispatch("GetCityName", city_name);
    // this.getBrowser();
    // this.visibilitychange();
  },
  methods: {
    nextTip() {
      this.active += 1;
    },
    resetForm() {
      this.active -= 1;
    },
    again() {
      this.active = 1;
    },
    // 重新登录
    returnDialogTableVisible() {
      this.$store.dispatch("LogOut").then(() => {
        // location.href = "/index";
        location.href = city_name == "dwdt" ? "/wycms/index" : "/index";
      });
    },
    submit() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          updateUserPwd(
            this.pwdOverTimeForm.oldPassword,
            this.pwdOverTimeForm.newPassword
          ).then((response) => {
            this.$store.dispatch("SET_dialogFormVisibleExpirationDayNum");
            this.msgSuccess("修改成功");
          });
        }
      });
    },
    submitFirstLoginForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUserPwd(
            this.firstLoginForm.oldPassword,
            this.firstLoginForm.newPassword
          )
            .then((res) => {
              this.nextTip();
              if (res.code == 200) {
                this.isSuccess = true;
                sessionStorage.removeItem("firstLogin");
              } else {
                this.isSuccess = false;
              }
            })
            .then(() => {});
        }
      });
    },
    getBrowser() {
      return;
      let a = GetCurrentBrowser();
      console.log("浏览器型号", a);
      if (a.toLowerCase().indexOf("ie") > -1) {
        window.location.href = "/html/ie.html";
        return;
      }
      return;
      var theUA = navigator.userAgent.toLowerCase();
      let flag =
        (theUA.match(/msie\s\d+/) && theUA.match(/msie\s\d+/)[0]) ||
        (theUA.match(/trident\s?\d+/) && theUA.match(/trident\s?\d+/)[0]);
      if (flag) {
        var ieVersion =
          theUA.match(/msie\s\d+/)[0].match(/\d+/)[0] ||
          theUA.match(/trident\s?\d+/)[0];
        if (ieVersion < 11) {
          var str = "你的浏览器版本太low了,已经和时代脱轨了 :(";
          var str2 =
            "推荐使用:<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E8%B0%B7%E6%AD%8C%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>谷歌</a>," +
            "<a href='https://www.baidu.com/s?ie=UTF-8&wd=%E7%81%AB%E7%8B%90%E6%B5%8F%E8%A7%88%E5%99%A8' target='_blank' style='color:blue;'>火狐</a>," +
            "其他双核极速模式";
          document.writeln(
            "<pre style='text-align:center;color:#fff;background-color:#0cc; height:100%;border:0;position:fixed;top:0;left:0;width:100%;z-index:1234'>" +
              "<h2 style='padding-top:200px;margin:0'><strong>" +
              str +
              "<br/></strong></h2><h2>" +
              str2 +
              "</h2><h2 style='margin:0'><strong>如果你的使用的是双核浏览器,请切换到极速模式访问<br/></strong></h2></pre>"
          );
          document.execCommand("Stop");
        }
      }
    },
    visibilitychange() {
      document.addEventListener(
        "visibilitychange",
        (e) => {
          if (!document.hidden) {
            // 页面隐藏
            // this.$refs.recommendPanel.showFundBox = false;
            //     this.getRecommendedList(true);
          }
        },
        false
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.topTip {
  text-align: left;
  line-height: 30px;
  color: red;
  font-weight: 700;
  margin: 10px 0;
}

.ImgTip {
  text-align: center;
  margin: 0 auto;
  p {
    margin: 20px 0;
  }
}
</style>
